<!--这个是注册页-->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('注册页')">
</head>

<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<script src="js/bootstrapValidator.min.js"></script>

<body>
<div class="container" id="workingArea">
    <div class="row clearfix">
        <!--导航栏-->
        <div class="col-md-12 column">
            <!--顶部导航栏-->
            <nav class="navbar  navbar-inverse " role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1"><span
                            class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span></button>
                    <a class="navbar-brand" href="fore_home">小萝筐新闻网</a>
                </div>

            </nav>
        </div>
        <div class="col-md-12 column">
            <div class="row clearfix">
                <!--注册模块-->
                <div class="col-md-offset-3 col-md-6 column">
                    <h3 class="text-center text-info">
                        注册
                    </h3>
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名：</label>
                            <div class="col-sm-10">

                                <input name="username" class="form-control"  @keyup="check(bean.name)"
                                       v-model="bean.name"/>
                                <span v-if="is_have_name">用户名已存在</span>
                                <span v-else></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码：</label>
                            <div class="col-sm-10">
                                <input type="password" name="password" class="form-control" v-model="bean.password"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">角色：</label>
                            <div class="col-sm-10">
                                <input type="role" class="form-control" disabled="disabled" v-model="bean.role"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-primary" @click="register">注册</button>
                                <a class="btn btn-primary" href="fore_login">返回登陆</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<!--前后端交互-->
<script>
    $(document).ready(function () {
//        $('#clickmewow').click(function () {
//            $('#radio1003').attr('checked', 'checked');
//        });

        var data4Vue = {
            uri: "userbyname",
            bean: {id: "", name: "", password: "", realname: "", phone: "", role: "新闻投稿员"},
            is_have_name: false
        };

        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted: function () {

            },
            methods: {
                /*注册信息*/
                register: function () {
                    /*bootstrap提交验证*/
                    var validator= $('form').data('bootstrapValidator').validate();
                    if(!validator.isValid()){
                        //没有通过校验
                        return;
                    } else {
                        //通过校验，可进行提交等操作
                    }
                    if (this.is_have_name) {
                        alert("信息输入有误")
                        return;
                    }
                    else {
                        var formData = new FormData();
                        formData.append("name", this.bean.name);
                        formData.append("password", this.bean.password);
                        formData.append("realname", this.bean.realname);
                        formData.append("phone", this.bean.phone);
                        formData.append("role", this.bean.role);
                        var url = "user";
                        axios.post(url, formData).then(function (response) {
                            if (response.data.code)
                            /*注册失败*/alert("注册失败");
                            else
                            /*注册成功*/alert("注册成功");

                        })
                    }
                },
//                校验用户名是否存在，设置判断结果is_have_name
                check: function (bean_name) {
                    var url = this.uri + "/" + bean_name;
//                    alert(url);
                    axios.get(url).then(function (response) {
                        console.log(response);
                        if (response.data.code) {
                            /*用户名不存在*/
                            vue.is_have_name = false;
                        }
                        else {
                            /*用户名已存在*/
                            vue.is_have_name = true;
                        }
                    })
                }

            }
        });
    });
</script>

<!--表单校验-->
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
                alert("submit");
            }
        });
    });
</script>
</body>
</html>